import QtQuick 2.0
import QtQuick.Layouts 1.12

Rectangle {
    id: root
    height: 260*dp
    width: 220*dp

    color: "#FAFAFA"
    radius: 5*dp

    property color curColor: config.themeColor
    property color pureColor: config.themeColor
    property var   defaultColor: ["#FF4500", "#FF8C00", "#FDD500", "#8EEA8E", "#00C9CC",
                                    "#1E8EFB", "#C11481", "#00BABD", "#078D5C", "#A800FF"]

    Component.onCompleted: {
        setColor(curColor)
    }

    function updateColor(){
        var h = hSlider.percentage*360
        var s = pannel.posiX
        var v = 1-pannel.posiY
        curColor = hsv2rgb(h, s, v)
        pureColor = hsv2rgb(h, 1, 1)
    }

    property color tempColor
    function setColor(c){
        tempColor = c
        var res = rgb2hsv(tempColor.r, tempColor.g, tempColor.b)
        hSlider.percentage = res[0]
        pannel.posiX = res[1]
        pannel.posiY = 1-res[2]
        updateColor()
    }


    function hsv2rgb(h, s, v){      // 返回color
        var c = v * s
        var x = c * (1 - Math.abs(h/60%2-1))
        var m = v - c
        var r, g, b
        if      (0<=h  && h<60){
            r = c; g = x; b = 0
        }else if(60<=h && h<120){
            r = x; g = c; b = 0
        }else if(120<=h && h<180){
            r = 0; g = c; b = x
        }else if(180<=h && h<240){
            r = 0; g = x; b = c
        }else if(240<=h && h<300){
            r = x; g = 0; b = c
        }else if(300<=h && h<=360){
            r = c; g = 0; b = x
        }
        r = r + m
        g = g + m
        b = b + m
        return Qt.rgba(r, g, b, 1)
    }

    function rgb2hsv(r, g, b) {     // 返回[h, s, v]
        var max = Math.max(r, g, b);
        var min = Math.min(r, g, b);
        var delta = max - min;

        var h = 0;
        var s = 0;
        var v = max;

        // 计算饱和度
        if (max !== 0) {
            s = delta / max;
        }

        // 计算色调
        if (delta !== 0) {
            if (max === r) {
                h = (g - b) / delta + (g < b ? 6 : 0);
            } else if (max === g) {
                h = (b - r) / delta + 2;
            } else if (max === b) {
                h = (r - g) / delta + 4;
            }
            h /= 6;
        }

        return [h, s, v];
    }

    // 矩形调色板
    Rectangle{
        id: pannel
        x: 10*dp; y: 10*dp
        height: root.height - 130*dp; width: root.width - 20*dp
        color: pureColor
        clip: true

        property var posiX: 0
        property var posiY: 0
        function refreshPosi(mouseX, mouseY){
            var mousePos = mapToItem(pannel, mouseX, mouseY)
            pannel.posiX = mousePos.x / pannel.width
            pannel.posiY = mousePos.y / pannel.height
            pannel.posiX = Math.max(0, Math.min(pannel.posiX, 1))
            pannel.posiY = Math.max(0, Math.min(pannel.posiY, 1))
            updateColor()
        }
        CustomImage{
            anchors.fill: parent
            source: "qrc:/picture/colorPannel_mask.png"
        }
        Rectangle{
            radius: 6*dp
            height: 12*dp; width: height
            border.color: "white"
            color: "transparent"
            border.width: 2*dp
            x: pannel.posiX * pannel.width - height * 0.5
            y: pannel.posiY * pannel.height - height * 0.5
        }

        MouseArea{
            anchors.fill: parent
            onPressed: {
                pannel.refreshPosi(mouseX, mouseY)
            }onPositionChanged: {
                pannel.refreshPosi(mouseX, mouseY)
            }
        }
    }

    // 进度条调色板
    Item{
        x: 10*dp; y: root.height-110*dp
        height: 30*dp; width: parent.width-20*dp

        CustomSlideBar{
            id: hSlider
            width: parent.width - 42*dp
            image_background: "qrc:/picture/colorPannel2.png"
            color_circle: pureColor
            color_circle_border: "white"
            anchors.verticalCenter: parent.verticalCenter
            onPercentageChanged: {
                updateColor()
            }
        }
        Rectangle{
            x: parent.width-30*dp
            height: 30*dp; width: 30*dp
            color: curColor
            radius: 3*dp
        }
    }

    // 预设颜色
    Item{
        x: 10*dp; y: root.height - 80*dp
        height: 40*dp; width: parent.width-20*dp
        Row{
            anchors.fill: parent
            spacing: (parent.width-150*dp) / 9
            Repeater{
                model: defaultColor.length
                Rectangle{
                    height: 15*dp; width: 15*dp
                    border.color: "#CCCCCC"
                    radius: 2
                    color: defaultColor[index]
                    anchors.verticalCenter: parent.verticalCenter
                    MouseArea{
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onClicked: {
                            setColor(defaultColor[index])
                        }
                    }
                }
            }
        }
    }
    // 按钮
    Item{
        x: 10*dp; y: root.height - 40*dp
        height: 30*dp; width: parent.width-20*dp
        Rectangle{
            height: 30*dp; width: parent.width * 0.5
            radius: 3*dp
            border.color: "#E0E0E0"
            Text{
                text: curColor
                anchors.centerIn: parent
                font.pixelSize: config.fontsize
            }
        }
        CustomButton{
            title: "应用"
            height: 30*dp; width: parent.width * 0.5 - 30*dp
            x: parent.width * 0.5 + 30*dp
            defaultMode1: true
            onClicked: {
                colorChanged(curColor)
            }
        }
    }



}
